<template>
  <el-dialog
    v-model="visible"
    title="偏好设置"
    width="600px"
    :before-close="handleClose">
    
    <el-form :model="localPreferences" label-width="120px" size="default">
      <!-- 外观设置 -->
      <el-divider content-position="left">
        <el-icon><Brush /></el-icon>
        外观设置
      </el-divider>
      
      <el-form-item label="主题">
        <el-radio-group v-model="localPreferences.theme">
          <el-radio value="light">
            <el-icon><Sunny /></el-icon>
            浅色主题
          </el-radio>
          <el-radio value="dark">
            <el-icon><Moon /></el-icon>
            深色主题
          </el-radio>
          <el-radio value="auto">
            <el-icon><Monitor /></el-icon>
            跟随系统
          </el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="语言">
        <el-select v-model="localPreferences.language" style="width: 200px">
          <el-option label="简体中文" value="zh-CN" />
          <el-option label="English" value="en-US" />
          <el-option label="繁體中文" value="zh-TW" />
        </el-select>
      </el-form-item>
      
      <!-- 数据设置 -->
      <el-divider content-position="left">
        <el-icon><DataBoard /></el-icon>
        数据设置
      </el-divider>
      
      <el-form-item label="分页大小">
        <el-input-number 
          v-model="localPreferences.pageSize" 
          :min="10" 
          :max="100" 
          :step="10" />
      </el-form-item>
      
      <el-form-item label="自动保存">
        <el-switch v-model="localPreferences.autoSave" />
        <span class="form-tip">开启后将自动保存您的工作</span>
      </el-form-item>
      
      <!-- 图表设置 -->
      <el-divider content-position="left">
        <el-icon><TrendCharts /></el-icon>
        图表设置
      </el-divider>
      
      <el-form-item label="默认颜色">
        <div class="color-picker-group">
          <el-color-picker 
            v-for="(color, index) in localPreferences.chartDefaults.colors"
            :key="index"
            v-model="localPreferences.chartDefaults.colors[index]"
            show-alpha />
        </div>
      </el-form-item>
      
      <el-form-item label="动画效果">
        <el-switch v-model="localPreferences.chartDefaults.animation" />
      </el-form-item>
      
      <el-form-item label="显示图例">
        <el-switch v-model="localPreferences.chartDefaults.showLegend" />
      </el-form-item>
      
      <!-- 性能设置 -->
      <el-divider content-position="left">
        <el-icon><Cpu /></el-icon>
        性能设置
      </el-divider>
      
      <el-form-item label="虚拟滚动">
        <el-switch v-model="localPreferences.virtualScroll" />
        <span class="form-tip">大数据集时提升性能</span>
      </el-form-item>
      
      <el-form-item label="缓存大小">
        <el-slider 
          v-model="localPreferences.cacheSize" 
          :min="10" 
          :max="100" 
          :step="10"
          show-stops
          show-tooltip />
        <span class="form-tip">{{ localPreferences.cacheSize }}MB</span>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetToDefaults">恢复默认</el-button>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="savePreferences">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useUserPreferences } from '../../composables/useLocalStorage'
import { useNotification } from '../../composables/useNotification'
import { 
  Brush, 
  Sunny, 
  Moon, 
  Monitor, 
  DataBoard, 
  TrendCharts, 
  Cpu 
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

// 组合式函数
const { preferences, updatePreference, reset } = useUserPreferences()
const { success } = useNotification()

// 响应式数据
const visible = ref(false)
const localPreferences = ref({})

// 监听器
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    // 深拷贝当前偏好设置
    localPreferences.value = JSON.parse(JSON.stringify(preferences.value))
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const savePreferences = () => {
  // 更新偏好设置
  Object.keys(localPreferences.value).forEach(key => {
    updatePreference(key, localPreferences.value[key])
  })
  
  success('偏好设置已保存')
  handleClose()
}

const resetToDefaults = () => {
  ElMessageBox.confirm(
    '确定要恢复默认设置吗？这将清除所有自定义配置。',
    '确认重置',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    reset()
    localPreferences.value = JSON.parse(JSON.stringify(preferences.value))
    success('已恢复默认设置')
  }).catch(() => {
    // 用户取消
  })
}
</script>

<style scoped>
.form-tip {
  margin-left: 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.color-picker-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-divider__text) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
</style>



